import * as echarts from 'echarts';

const guangxi3DMap = (cityList, areaList) => {
  console.log("cityList", cityList);
  console.log("areaList", areaList);
  let getJson = require("./json/450000.json")
  var mapData = cityList
  let areaData = areaList
  echarts.registerMap('广西', getJson);
  let option = {
    //提示框
    tooltip: {
      trigger: 'item',
      position: function (point, params, dom, rect, size) {
        var x = 0; // x坐标位置
        var y = 0; // y坐标位置
        // 当前鼠标位置
        var pointX = point[0];
        var pointY = point[1];
        // 提示框大小
        var boxWidth = size.contentSize[0];
        var boxHeight = size.contentSize[1];

        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = pointX + 10;
        } else { // 左边放的下
          x = pointX - boxWidth - 10;
        }

        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight > pointY) {
          y = 5;
        } else { // 上边放得下
          y = pointY - boxHeight;
        }
        return [x, y];
      },
      show: true,
      enterable: true,
      textStyle: {
        fontSize: 13,
        color: '#fff',
      },
      backgroundColor: 'rgba(0,2,89,0.8)',
      //自定义提示框 触摸城市和区域 提示内容不同
      formatter: function (params) {
        var tipHtml = '';
        if (params.data.isCity == 0) {
          tipHtml = `
          <div class="ui-map-img">
              <div class='ui-maptxt'>${params.name}</div>
          </div>
      `
        } else {
          let areaList = areaData.filter(area => area.father == params.data.code)
          let areaListHtml = `<div class='ui-area-content'>监测列表:`
          if (areaList.length > 0) {
            areaList.forEach(area => {
              areaListHtml += `<div class='ui-area-content__name'>${area.name}</div>`
            })
          } else {
            areaListHtml += `<div class='ui-area-content__name'>暂无检测点</div>`
          }
          areaListHtml += `</div>`
          tipHtml = `
          <div class="ui-map-img">
              <div class='ui-maptxt'>城市：${params.name}</div>
            ${areaListHtml}
          </div>`
        }
        return tipHtml;
      },
    },
    //地图配置
    geo: [{
      map: "广西",
      aspectScale: 1,
      zoom: 0.65,
      layoutCenter: ["50%", "50%"],
      layoutSize: "180%",
      show: true,
      roam: false,
      label: {
        // 常态下样式
        normal: {},
        // 鼠标触摸样式
        emphasis: {
          show: false,
          label: {
            show: true
          }
        },
      },
      // 地图区域的样式设置
      itemStyle: {
        normal: {
          borderColor: "#9ecde7",
          borderWidth: 1,
          shadowColor: "#8cd3ef",
          shadowOffsetY: 10,
          shadowBlur: 120,
          areaColor: "transparent",
        },
      }
    },
    // 重影
    {
      type: "map",
      map: "广西",
      zlevel: -1,
      aspectScale: 1,
      zoom: 0.65,
      layoutCenter: ["50%", "51%"],
      layoutSize: "180%",
      roam: false,
      silent: true,
      itemStyle: {
        normal: {
          borderWidth: 1,
          // borderColor:"rgba(17, 149, 216,0.6)",
          borderColor: "rgba(58,149,253,0.8)",
          shadowColor: "rgba(172, 122, 255,0.5)",
          shadowOffsetY: 5,
          shadowBlur: 15,
          areaColor: "rgba(5,21,35,0.1)",
        },
      },
    }, {
      type: "map",
      map: "广西",
      zlevel: -2,
      aspectScale: 1,
      zoom: 0.65,
      layoutCenter: ["50%", "52%"],
      layoutSize: "180%",
      roam: false,
      silent: true,
      itemStyle: {
        normal: {
          borderWidth: 1,
          // borderColor: "rgba(57, 132, 188,0.4)",
          borderColor: "rgba(58,149,253,0.6)",
          shadowColor: "rgba(65, 214, 255,1)",
          shadowOffsetY: 5,
          shadowBlur: 15,
          areaColor: "transpercent",
        },
      },
    }, {
      type: "map",
      map: "广西",
      zlevel: -3,
      aspectScale: 1,
      zoom: 0.65,
      layoutCenter: ["50%", "53%"],
      layoutSize: "180%",
      roam: false,
      silent: true,
      itemStyle: {
        normal: {
          borderWidth: 1,
          // borderColor: "rgba(11, 43, 97,0.8)",
          borderColor: "rgba(58,149,253,0.4)",
          shadowColor: "rgba(58,149,253,1)",
          shadowOffsetY: 15,
          shadowBlur: 10,
          areaColor: "transpercent",
        },
      },
    }, {
      type: "map",
      map: "广西",
      zlevel: -4,
      aspectScale: 1,
      zoom: 0.65,
      layoutCenter: ["50%", "54%"],
      layoutSize: "180%",
      roam: false,
      silent: true,
      itemStyle: {
        normal: {
          borderWidth: 5,
          // borderColor: "rgba(11, 43, 97,0.8)",
          borderColor: "rgba(15,19,157,0.8)",
          shadowColor: "rgba(29, 111, 165,0.8)",
          shadowOffsetY: 15,
          shadowBlur: 10,
          areaColor: "rgba(5,21,35,0.1)",
        },
      },
    },
    ],
    series: [{
      name: "广西市数据",
      type: "map",
      map: "广西", // 自定义扩展图表类型
      aspectScale: 1,
      zoom: 0.65, // 缩放
      showLegendSymbol: true,

      selectedMode: "single",
      label: {
        normal: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: "120%"
          },
        },
        emphasis: {
          // show: false,
        },
      },
      itemStyle: {
        normal: {
          areaColor: {
            type: "linear",
            x: 1200,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: "rgba(3,27,78,0.75)", // 0% 处的颜色
            }, {
              offset: 1,
              color: "rgba(58,149,253,0.75)", // 50% 处的颜色
            },],
            global: true, // 缺省为 false
          },
          borderColor: "#fff",
          borderWidth: 0.2,
        },
        emphasis: {
          show: false,
          color: "#fff",
          areaColor: "rgba(0,254,233,0.6)",
        },
      },

      layoutCenter: ["50%", "50%"],
      layoutSize: "180%",
      markPoint: {
        symbol: "none",
      },
      data: mapData,
    },
    //气泡
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',  //使用地理坐标系
      //要有对应的经纬度才显示，先经度再维度
      data: areaData,
      showEffectOn: 'emphasis',  //绘制完成后显示特效
      rippleEffect: {
        scale: 3, // 波纹的最大缩放比例
        brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {  //图形上的文本标签
        show: true,
        formatter: '{b}',
        position: 'right',
        fontWeight: 500,
        fontSize: 10
      },
      //默认样式
      itemStyle: {
        color: '#fcb40e',
        shadowBlur: 10,
        shadowColor: '#ef7c15'
      },
      //鼠标移入时样式
      emphasis: {
        itemStyle: {
          color: '#f4e925' // 高亮颜色
        },
        focus: 'series'
      },
      onclick: function (param) {
        console.log(param);
      },
      zlevel: 1
    },
    ],
  };

  // myChart.setOption(option);

  // var index = 0; //播放所在下标
  // var showTip = setInterval(function () {
  //   myChart.dispatchAction({
  //     type: 'showTip',
  //     seriesIndex: 0,
  //     dataIndex: index,
  //   });
  //   index++;
  //   if (index >= 14) {
  //     index = 0;
  //   }
  // }, 2000);

  // myChart.on('mouseover', function (params) {
  //   console.log(params);
  //   clearInterval(showTip);
  //   myChart.dispatchAction({
  //     type: 'showTip',
  //     seriesIndex: 0,
  //     dataIndex: params.dataIndex,
  //   });
  // });

  // myChart.on('mouseout', function (params) {
  //     showTip && clearInterval(showTip);
  //     showTip = setInterval(function () {
  //         myChart.dispatchAction({
  //             type: 'showTip',
  //             seriesIndex: 0,
  //             dataIndex: index,
  //         });
  //         index++;
  //         if (index >= 14) {
  //             index = 0;
  //         }
  //     }, 2000);
  // });

  const opt = Object.assign({}, option);
  return opt;

}



export default {
  guangxi3DMap
}
